<!--
 * @Descripttion: 选择对象-搜索工具类
 * @LastEditors: xzh
 * @LastEditTime: 2023-09-15 14:11:20
-->
<template>
  <div class="searchTool-container">
    <div class="searchTool-content">
      <!-- 动态节点组件 -->
      <component
        :is="objectComponent"
        ref="componentRef"
        :searchData="searchToolParam.searchData"
      />
    </div>
    <div class="searchTool-btn">
      <el-button size="default" @click="handleReset">
        {{ $t("table.btnArr.reset") }}
      </el-button>
      <el-button size="default" type="success" @click="handleSearch">{{
        $t("table.btnArr.search")
      }}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineAsyncComponent, computed } from "vue";
import type { object_Inf } from "@/utils/typings/index.type";
import DileLoading from "@/components/dile-loading/index.vue";
import { selectTableTypeEnum } from "../../index.type";

const emit = defineEmits(["search"]);
const props = defineProps({
  //选择列表类型
  selectTableType: {
    type: String,
    requited: true,
    default: "",
  },
});
/**
 * @Author: xzh
 * @Descripttion: 动态组件实例
 * @Param:
 */
let componentRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 搜索工具类
 * @Param:
 */
let searchToolParam = reactive<object_Inf>({
  searchData: {},
  //模块组件
  modulesMap: (import.meta as any).glob("./**/*.vue"),
});
/**
 * @Author: xzh
 * @Descripttion: 动态加载对象组件
 * @Param:
 */
let objectComponent = computed(() => {
  let { modulesMap } = searchToolParam,
    component: string = "";

  switch (props.selectTableType) {
    case selectTableTypeEnum.equip:
      //设备
      component = "./searchTool-equip/index.vue";
      break;
    case selectTableTypeEnum.equipUpkeepItem:
      //设备保养项目
      component = "./searchTool-equipUpkeepItem/index.vue";
      break;
    case selectTableTypeEnum.mold:
      //模具
      component = "./searchTool-mold/index.vue";
      break;
    case selectTableTypeEnum.moldUpkeepItem:
      //模具保养项目
      component = "./searchTool-moldUpkeepItem/index.vue";
      break;
  }
  return defineAsyncComponent({
    loader: modulesMap[component],
    loadingComponent: DileLoading,
  });
});
/**
 * @Author: xzh
 * @Descripttion:搜索事件
 * @Param:
 */
let handleSearch = () => {
  let { searchData } = searchToolParam;
  emit("search", searchData);
};
/**
 * @Author: xzh
 * @Descripttion:重置
 * @Param:
 */
let handleReset = () => {
  componentRef.value.reset();
};
</script>
<style lang="scss" scoped>
.searchTool-container {
  display: flex;
  flex-direction: row;
  :deep(.searchTool-content) {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    .el-skeleton {
      width: 100%;
      height: 100%;
      display: flex;
      gap: 1rem;
      .el-skeleton__item {
        height: 100%;
      }
    }
  }
  .searchTool-btn {
    flex: 10rem 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
  }
}
</style>
